+

Icons

Icons should be used to maximize comprehension and reduce cognitive load when you need to call attention to a particular action, command, or section. Our icons are designed with our brand personality baked in.

Import

import {Activity} from '@comfortdelgro/compass-icons/iconify'
import {Activity} from '@comfortdelgro/compass-icons/react'

or

import Activity from '@comfortdelgro/compass-icons/iconify/activity'
import Activity from '@comfortdelgro/compass-icons/react/activity'

Filled Icons

import AddressBookFilled from '@comfortdelgro/compass-icons/react/filled/address-book-filled'
address-book-filled
arrow-down-filled
arrow-left-filled
arrow-right-filled
arrow-up-filled
calendar-days-filled
clock-filled
credit-card-filled
duplicate-image-filled
exclamation-filled
group-add-filled
group-settings-filled
heart-filled
image-filled
info-filled
mail-filled
notification-filled
pencil-filled
person-filled
profile-filled
question-filled
star-filled
thumbtack-filled
trash-filled
user-add-filled
warning-filled
Typescript
<AddressBookFilled width={40} height={40} /> 
<ArrowDownFilled width={40} height={40} /> 
<ArrowLeftFilled width={40} height={40} /> 
<ArrowRightFilled width={40} height={40} /> 
<ArrowUpFilled width={40} height={40} /> 
<CalendarDaysFilled width={40} height={40} /> 
<ClockFilled width={40} height={40} /> 
<CreditCardFilled width={40} height={40} /> 
<DuplicateImageFilled width={40} height={40} /> 
<ExclamationFilled width={40} height={40} /> 
<GroupAddFilled width={40} height={40} /> 
<GroupSettingsFilled width={40} height={40} /> 
<HeartFilled width={40} height={40} /> 
<ImageFilled width={40} height={40} /> 
<InfoFilled width={40} height={40} /> 
<MailFilled width={40} height={40} /> 
<NotificationFilled width={40} height={40} /> 
<PencilFilled width={40} height={40} /> 
<PersonFilled width={40} height={40} /> 
<ProfileFilled width={40} height={40} /> 
<QuestionFilled width={40} height={40} /> 
<StarFilled width={40} height={40} /> 
<ThumbtackFilled width={40} height={40} /> 
<TrashFilled width={40} height={40} /> 
<UserAddFilled width={40} height={40} /> 
<WarningFilled width={40} height={40} />

Outline Icons

import AddressBookOutlined from '@comfortdelgro/compass-icons/react/outlined/address-book-outlined'
address-book-outlined
arrow-down-outlined
arrow-left-outlined
arrow-right-outlined
arrow-up-outlined
calendar-days-outlined
clock-outlined
credit-card-outlined
duplicate-image-outlined
exclamation-outlined
group-add-outlined
group-settings-outlined
heart-outlined
image-outlined
info-outlined
mail-outlined
notification-outlined
pencil-outlined
person-outlined
profile-outlined
question-outlined
star-outlined
thumbtack-outlined
trash-outlined
user-add-outlined
user-group-outlined
warning-outlined
Typescript
<AddressBookOutlined width={40} height={40} /> 
<ArrowDownOutlined width={40} height={40} /> 
<ArrowLeftOutlined width={40} height={40} /> 
<ArrowRightOutlined width={40} height={40} /> 
<ArrowUpOutlined width={40} height={40} /> 
<CalendarDaysOutlined width={40} height={40} /> 
<ClockOutlined width={40} height={40} /> 
<CreditCardOutlined width={40} height={40} /> 
<DuplicateImageOutlined width={40} height={40} /> 
<ExclamationOutlined width={40} height={40} /> 
<GroupAddOutlined width={40} height={40} /> 
<GroupSettingsOutlined width={40} height={40} /> 
<HeartOutlined width={40} height={40} /> 
<ImageOutlined width={40} height={40} /> 
<InfoOutlined width={40} height={40} /> 
<MailOutlined width={40} height={40} /> 
<NotificationOutlined width={40} height={40} /> 
<PencilOutlined width={40} height={40} /> 
<PersonOutlined width={40} height={40} /> 
<ProfileOutlined width={40} height={40} /> 
<QuestionOutlined width={40} height={40} /> 
<StarOutlined width={40} height={40} /> 
<ThumbtackOutlined width={40} height={40} /> 
<TrashOutlined width={40} height={40} /> 
<UserAddOutlined width={40} height={40} /> 
<UserGroupOutlined width={40} height={40} /> 
<WarningOutlined width={40} height={40} />

Duotone Icons

import BadgeDollarDuotone from '@comfortdelgro/compass-icons/react/duotone/badge-dollar-duotone'
badge-dollar-duotone
calendar-days-duotone
chart-line-up-duotone
chart-pie-duotone
edit-duotone
flag-duotone
gears-duotone
grid-duotone
notification-duotone
org-chart-duotone
password-duotone
trash-duotone
user-duotone
Typescript
<BadgeDollarDuotone width={40} height={40} /> 
<CalendarDaysDuotone width={40} height={40} /> 
<ChartLineUpDuotone width={40} height={40} /> 
<ChartPieDuotone width={40} height={40} /> 
<EditDuotone width={40} height={40} /> 
<FlagDuotone width={40} height={40} /> 
<GearsDuotone width={40} height={40} /> 
<GridDuotone width={40} height={40} /> 
<NotificationDuotone width={40} height={40} /> 
<OrgChartDuotone width={40} height={40} /> 
<PasswordDuotone width={40} height={40} /> 
<TrashDuotone width={40} height={40} /> 
<UserDuotone width={40} height={40} />

Colorful Icons

import Compass from '@comfortdelgro/compass-icons/react/colorful/compass'
admin-potal-light
admin-potal
caby-portal-light
caby-portal
clubhouse
cms-light
cms
comfort-connect-light
comfort-connect
compass
crown
discord
doctype
dribbble
facebook
figma
fms-light
fms
fnb-light
fnb
google
linkedin
pinterest
reddit
signal
snapchat
telegram
tem-light
tem
tiktok
tumblr
twitter
workbench-light
workbench-text
workbench
youtube
zig-biz-square
zig-biz-tsm
zig-biz-white
zig-biz
zig-store-light
zig-store
Typescript
<AdminPotalLightColorful width={40} height={40} /> 
<AdminPotalColorful width={40} height={40} /> 
<CabyPortalLightColorful width={40} height={40} /> 
<CabyPortalColorful width={40} height={40} /> 
<ClubhouseColorful width={40} height={40} /> 
<CmsLightColorful width={40} height={40} /> 
<CmsColorful width={40} height={40} /> 
<ComfortConnectLightColorful width={40} height={40} /> 
<ComfortConnectColorful width={40} height={40} /> 
<CompassColorful width={40} height={40} /> 
<CrownColorful width={40} height={40} /> 
<DiscordColorful width={40} height={40} /> 
<DoctypeColorful width={40} height={40} /> 
<DribbbleColorful width={40} height={40} /> 
<FacebookColorful width={40} height={40} /> 
<FigmaColorful width={40} height={40} /> 
<FmsLightColorful width={40} height={40} /> 
<FmsColorful width={40} height={40} /> 
<FnbLightColorful width={40} height={40} /> 
<FnbColorful width={40} height={40} /> 
<GoogleColorful width={40} height={40} /> 
<LinkedinColorful width={40} height={40} /> 
<PinterestColorful width={40} height={40} /> 
<RedditColorful width={40} height={40} /> 
<SignalColorful width={40} height={40} /> 
<SnapchatColorful width={40} height={40} /> 
<TelegramColorful width={40} height={40} /> 
<TemLightColorful width={40} height={40} /> 
<TemColorful width={40} height={40} /> 
<TiktokColorful width={40} height={40} /> 
<TumblrColorful width={40} height={40} /> 
<TwitterColorful width={40} height={40} /> 
<WorkbenchLightColorful width={40} height={40} /> 
<WorkbenchTextColorful width={40} height={40} /> 
<WorkbenchColorful width={40} height={40} /> 
<YoutubeColorful width={40} height={40} /> 
<ZigBizSquareColorful width={40} height={40} /> 
<ZigBizTsmColorful width={40} height={40} /> 
<ZigBizWhiteColorful width={40} height={40} /> 
<ZigBizColorful width={40} height={40} /> 
<ZigStoreLightColorful width={40} height={40} /> 
<ZigStoreColorful width={40} height={40} />

Payment Icons

import Compass from '@comfortdelgro/compass-icons/react/payment/compass'
affirm
alipay
amazon
amex
apple-pay
bancontact
bitcoin-cash
bitcoin
bitpay
citadele
diners-club
discover
elo
etherium
forbrugsforeningen
giro-pay
google-pay
ideal
interac
jcb
klarna
lightcoin
maestro
mastercard
payoneer
paypal
paysafe
qiwi
sepa
shop-pay
skrill
sofort
stripe
union-pay
verifone
visa
we-chat
web-money
yandex
Typescript
<Affirm width={40} height={40} /> 
<Alipay width={40} height={40} /> 
<Amazon width={40} height={40} /> 
<Amex width={40} height={40} /> 
<ApplePay width={40} height={40} /> 
<Bancontact width={40} height={40} /> 
<BitcoinCash width={40} height={40} /> 
<Bitcoin width={40} height={40} /> 
<Bitpay width={40} height={40} /> 
<Citadele width={40} height={40} /> 
<DinersClub width={40} height={40} /> 
<Discover width={40} height={40} /> 
<Elo width={40} height={40} /> 
<Etherium width={40} height={40} /> 
<Forbrugsforeningen width={40} height={40} /> 
<GiroPay width={40} height={40} /> 
<GooglePay width={40} height={40} /> 
<Ideal width={40} height={40} /> 
<Interac width={40} height={40} /> 
<Jcb width={40} height={40} /> 
<Klarna width={40} height={40} /> 
<Lightcoin width={40} height={40} /> 
<Maestro width={40} height={40} /> 
<Mastercard width={40} height={40} /> 
<Payoneer width={40} height={40} /> 
<Paypal width={40} height={40} /> 
<Paysafe width={40} height={40} /> 
<Qiwi width={40} height={40} /> 
<Sepa width={40} height={40} /> 
<ShopPay width={40} height={40} /> 
<Skrill width={40} height={40} /> 
<Sofort width={40} height={40} /> 
<Stripe width={40} height={40} /> 
<UnionPay width={40} height={40} /> 
<Verifone width={40} height={40} /> 
<Visa width={40} height={40} /> 
<WeChat width={40} height={40} /> 
<WebMoney width={40} height={40} /> 
<Yandex width={40} height={40} />

Other Icons

import Activity from '@comfortdelgro/compass-icons/react/activity'
activity
align-center
align-justify
align-left
align-right
angellist
apple
arrow-down
arrow-left
arrow-right
arrow-up
bid
bold
browser
bug
building
bus-2
bus-and-car
bus
calendar
cancelled
capacity
car
caret-down
caret-left
caret-right
caret-up
chart
chat
cities
clapperboard-play
classification
clipboard
cloud-upload
copy
cross-circle
cross
customer-service
dashboard
deleted
document
download
driver
edit
email
excel
export
eye-slash
eye-solid
face-frown
face-laugh
face-meh
face-sad-tear
face-smile-heart
face-smile
facebook-circular
facebook-square
file-laptop
file-pen
file-signature
file
fill
filter
flag
folder-open
folder
font-colour
font
gauge
gears
github
globe
google
grid
grip-dots
h
h1
h2
h3
h4
h5
h6
hat-wizard
heading
hexagon-xmark
hide
home
hourglass-clock
info-square
inspect
instagram
invoice
italic
job-2
job
key
layers
lightbulb-on
link
linkedin
list-ol
list-ul
list
logout
low-volume
maintenance
map-marked
map-marker
map
menu
message-lines
message
minus-square
minus
money-bill
money-check-alt
money
mute
notification-badge
notification-off
outdent
paste
pause
pdf
pen-nib
phone
pinterest
plus-square
plus
profile-card
profile
project
question-square
quote-left
quote-right
rating-star-0
rating-star-10
rating-star-100
rating-star-20
rating-star-30
rating-star-40
rating-star-50
rating-star-60
rating-star-70
rating-star-80
rating-star-90
refresh
reveal
school
search
settings
shapes
share
shield-2
shield
snapchat
sort-1-to-9-ascending
sort-1-to-9-descending
sort-9-to-1-ascending
sort-9-to-1-descending
sort
sparkle
spreadsheet
stamp
status
store
strikethrough
suitcase
table-columns
table
tags
taxi
text-height
thumb-down
thumb-up
tick-circle
tick
ticket
timeline
twitter
underline
unpin
upload
user-tie
users
verified
volume
word
youtube
zoom-in
zoom-minus
zoom-out
zoom-plus
Typescript
<Activity width={40} height={40} /> 
<AlignCenter width={40} height={40} /> 
<AlignJustify width={40} height={40} /> 
<AlignLeft width={40} height={40} /> 
<AlignRight width={40} height={40} /> 
<Angellist width={40} height={40} /> 
<Apple width={40} height={40} /> 
<ArrowDown width={40} height={40} /> 
<ArrowLeft width={40} height={40} /> 
<ArrowRight width={40} height={40} /> 
<ArrowUp width={40} height={40} /> 
<Bid width={40} height={40} /> 
<Bold width={40} height={40} /> 
<Browser width={40} height={40} /> 
<Bug width={40} height={40} /> 
<Building width={40} height={40} /> 
<Bus2 width={40} height={40} /> 
<BusAndCar width={40} height={40} /> 
<Bus width={40} height={40} /> 
<Calendar width={40} height={40} /> 
<Cancelled width={40} height={40} /> 
<Capacity width={40} height={40} /> 
<Car width={40} height={40} /> 
<CaretDown width={40} height={40} /> 
<CaretLeft width={40} height={40} /> 
<CaretRight width={40} height={40} /> 
<CaretUp width={40} height={40} /> 
<Chart width={40} height={40} /> 
<Chat width={40} height={40} /> 
<Cities width={40} height={40} /> 
<ClapperboardPlay width={40} height={40} /> 
<Classification width={40} height={40} /> 
<Clipboard width={40} height={40} /> 
<CloudUpload width={40} height={40} /> 
<Copy width={40} height={40} /> 
<CrossCircle width={40} height={40} /> 
<Cross width={40} height={40} /> 
<CustomerService width={40} height={40} /> 
<Dashboard width={40} height={40} /> 
<Deleted width={40} height={40} /> 
<Document width={40} height={40} /> 
<Download width={40} height={40} /> 
<Driver width={40} height={40} /> 
<Edit width={40} height={40} /> 
<Email width={40} height={40} /> 
<Excel width={40} height={40} /> 
<Export width={40} height={40} /> 
<EyeSlash width={40} height={40} /> 
<EyeSolid width={40} height={40} /> 
<FaceFrown width={40} height={40} /> 
<FaceLaugh width={40} height={40} /> 
<FaceMeh width={40} height={40} /> 
<FaceSadTear width={40} height={40} /> 
<FaceSmileHeart width={40} height={40} /> 
<FaceSmile width={40} height={40} /> 
<FacebookCircular width={40} height={40} /> 
<FacebookSquare width={40} height={40} /> 
<FileLaptop width={40} height={40} /> 
<FilePen width={40} height={40} /> 
<FileSignature width={40} height={40} /> 
<File width={40} height={40} /> 
<Fill width={40} height={40} /> 
<Filter width={40} height={40} /> 
<Flag width={40} height={40} /> 
<FolderOpen width={40} height={40} /> 
<Folder width={40} height={40} /> 
<FontColour width={40} height={40} /> 
<Font width={40} height={40} /> 
<Gauge width={40} height={40} /> 
<Gears width={40} height={40} /> 
<Github width={40} height={40} /> 
<Globe width={40} height={40} /> 
<Google width={40} height={40} /> 
<Grid width={40} height={40} /> 
<GripDots width={40} height={40} /> 
<H width={40} height={40} /> 
<H1 width={40} height={40} /> 
<H2 width={40} height={40} /> 
<H3 width={40} height={40} /> 
<H4 width={40} height={40} /> 
<H5 width={40} height={40} /> 
<H6 width={40} height={40} /> 
<HatWizard width={40} height={40} /> 
<Heading width={40} height={40} /> 
<HexagonXmark width={40} height={40} /> 
<Hide width={40} height={40} /> 
<Home width={40} height={40} /> 
<HourglassClock width={40} height={40} /> 
<InfoSquare width={40} height={40} /> 
<Inspect width={40} height={40} /> 
<Instagram width={40} height={40} /> 
<Invoice width={40} height={40} /> 
<Italic width={40} height={40} /> 
<Job2 width={40} height={40} /> 
<Job width={40} height={40} /> 
<Key width={40} height={40} /> 
<Layers width={40} height={40} /> 
<LightbulbOn width={40} height={40} /> 
<Link width={40} height={40} /> 
<Linkedin width={40} height={40} /> 
<ListOl width={40} height={40} /> 
<ListUl width={40} height={40} /> 
<List width={40} height={40} /> 
<Logout width={40} height={40} /> 
<LowVolume width={40} height={40} /> 
<Maintenance width={40} height={40} /> 
<MapMarked width={40} height={40} /> 
<MapMarker width={40} height={40} /> 
<Map width={40} height={40} /> 
<Menu width={40} height={40} /> 
<MessageLines width={40} height={40} /> 
<Message width={40} height={40} /> 
<MinusSquare width={40} height={40} /> 
<Minus width={40} height={40} /> 
<MoneyBill width={40} height={40} /> 
<MoneyCheckAlt width={40} height={40} /> 
<Money width={40} height={40} /> 
<Mute width={40} height={40} /> 
<NotificationBadge width={40} height={40} /> 
<NotificationOff width={40} height={40} /> 
<Outdent width={40} height={40} /> 
<Paste width={40} height={40} /> 
<Pause width={40} height={40} /> 
<Pdf width={40} height={40} /> 
<PenNib width={40} height={40} /> 
<Phone width={40} height={40} /> 
<Pinterest width={40} height={40} /> 
<PlusSquare width={40} height={40} /> 
<Plus width={40} height={40} /> 
<ProfileCard width={40} height={40} /> 
<Profile width={40} height={40} /> 
<Project width={40} height={40} /> 
<QuestionSquare width={40} height={40} /> 
<QuoteLeft width={40} height={40} /> 
<QuoteRight width={40} height={40} /> 
<RatingStar0 width={40} height={40} /> 
<RatingStar10 width={40} height={40} /> 
<RatingStar100 width={40} height={40} /> 
<RatingStar20 width={40} height={40} /> 
<RatingStar30 width={40} height={40} /> 
<RatingStar40 width={40} height={40} /> 
<RatingStar50 width={40} height={40} /> 
<RatingStar60 width={40} height={40} /> 
<RatingStar70 width={40} height={40} /> 
<RatingStar80 width={40} height={40} /> 
<RatingStar90 width={40} height={40} /> 
<Refresh width={40} height={40} /> 
<Reveal width={40} height={40} /> 
<School width={40} height={40} /> 
<Search width={40} height={40} /> 
<Settings width={40} height={40} /> 
<Shapes width={40} height={40} /> 
<Share width={40} height={40} /> 
<Shield2 width={40} height={40} /> 
<Shield width={40} height={40} /> 
<Snapchat width={40} height={40} /> 
<Sort1To9Ascending width={40} height={40} /> 
<Sort1To9Descending width={40} height={40} /> 
<Sort9To1Ascending width={40} height={40} /> 
<Sort9To1Descending width={40} height={40} /> 
<Sort width={40} height={40} /> 
<Sparkle width={40} height={40} /> 
<Spreadsheet width={40} height={40} /> 
<Stamp width={40} height={40} /> 
<Status width={40} height={40} /> 
<Store width={40} height={40} /> 
<Strikethrough width={40} height={40} /> 
<Suitcase width={40} height={40} /> 
<TableColumns width={40} height={40} /> 
<Table width={40} height={40} /> 
<Tags width={40} height={40} /> 
<Taxi width={40} height={40} /> 
<TextHeight width={40} height={40} /> 
<ThumbDown width={40} height={40} /> 
<ThumbUp width={40} height={40} /> 
<TickCircle width={40} height={40} /> 
<Tick width={40} height={40} /> 
<Ticket width={40} height={40} /> 
<Timeline width={40} height={40} /> 
<Twitter width={40} height={40} /> 
<Underline width={40} height={40} /> 
<Unpin width={40} height={40} /> 
<Upload width={40} height={40} /> 
<UserTie width={40} height={40} /> 
<Users width={40} height={40} /> 
<Verified width={40} height={40} /> 
<Volume width={40} height={40} /> 
<Word width={40} height={40} /> 
<Youtube width={40} height={40} /> 
<ZoomIn width={40} height={40} /> 
<ZoomMinus width={40} height={40} /> 
<ZoomOut width={40} height={40} /> 
<ZoomPlus width={40} height={40} />

Country Icons

import FlagAbw from '@comfortdelgro/compass-icons/react/country/flag-abw'
flag-abw
flag-afg
flag-ago
flag-aia
flag-ala
flag-alb
flag-and
flag-are
flag-arg
flag-arm
flag-asm
flag-ata
flag-atg
flag-aus
flag-aut
flag-aze
flag-bdi
flag-bel
flag-ben
flag-bes
flag-bfa
flag-bgd
flag-bgr
flag-bhr
flag-bhs
flag-bih
flag-blm
flag-blr
flag-blz
flag-bmu
flag-bol
flag-bra
flag-brb
flag-brn
flag-btn
flag-bwa
flag-caf
flag-can
flag-cck
flag-che
flag-chl
flag-chn
flag-civ
flag-cmr
flag-cod
flag-cog
flag-cok
flag-col
flag-com
flag-cpv
flag-cri
flag-cub
flag-cuw
flag-cxr
flag-cym
flag-cyp
flag-cze
flag-deu
flag-dji
flag-dma
flag-dnk
flag-dom
flag-dza
flag-ecu
flag-egy
flag-eri
flag-esh
flag-esp
flag-est
flag-eth
flag-fin
flag-fji
flag-flk
flag-fra
flag-fro
flag-fsm
flag-gab
flag-gbr
flag-geo
flag-ggy
flag-gha
flag-gib
flag-gin
flag-glp
flag-gmb
flag-gnb
flag-gnq
flag-grc
flag-grd
flag-grl
flag-gtm
flag-guf
flag-gum
flag-guy
flag-hkg
flag-hnd
flag-hrv
flag-hti
flag-hun
flag-idn
flag-imn
flag-ind
flag-iot
flag-irl
flag-irn
flag-irq
flag-isl
flag-isr
flag-ita
flag-jam
flag-jey
flag-jor
flag-jpn
flag-kaz
flag-ken
flag-kgz
flag-khm
flag-kir
flag-kna
flag-kor
flag-kos
flag-kwt
flag-lao
flag-lbn
flag-lbr
flag-lby
flag-lca
flag-lie
flag-lka
flag-lso
flag-ltu
flag-lux
flag-lva
flag-mac
flag-maf
flag-mar
flag-mco
flag-mda
flag-mdg
flag-mdv
flag-mex
flag-mhl
flag-mkd
flag-mli
flag-mlt
flag-mmr
flag-mne
flag-mng
flag-mnp
flag-moz
flag-mrt
flag-msr
flag-mtq
flag-mus
flag-mwi
flag-mys
flag-myt
flag-nam
flag-ncl
flag-ner
flag-nfk
flag-nga
flag-nic
flag-niu
flag-nld
flag-nor
flag-npl
flag-nru
flag-nzl
flag-omn
flag-pak
flag-pan
flag-pcn
flag-per
flag-phl
flag-plw
flag-png
flag-pol
flag-pri
flag-prk
flag-prt
flag-pry
flag-pse
flag-pyf
flag-qat
flag-reu
flag-rou
flag-rus
flag-rwa
flag-sau
flag-sdn
flag-sen
flag-sgp
flag-sgs
flag-shn
flag-sjm
flag-slb
flag-sle
flag-slv
flag-smr
flag-som
flag-spm
flag-srb
flag-ssd
flag-stp
flag-sur
flag-svk
flag-svn
flag-swe
flag-swz
flag-sxm
flag-syc
flag-syr
flag-tca
flag-tcd
flag-tgo
flag-tha
flag-tjk
flag-tkl
flag-tkm
flag-tls
flag-ton
flag-tto
flag-tun
flag-tur
flag-tuv
flag-twn
flag-tza
flag-uga
flag-ukr
flag-ury
flag-usa
flag-uzb
flag-vat
flag-vct
flag-ven
flag-vgb
flag-vir
flag-vnm
flag-vut
flag-wlf
flag-wsm
flag-yem
flag-zaf
flag-zmb
flag-zwe
Typescript
<FlagAbw width={40} height={40} /> 
<FlagAfg width={40} height={40} /> 
<FlagAgo width={40} height={40} /> 
<FlagAia width={40} height={40} /> 
<FlagAla width={40} height={40} /> 
<FlagAlb width={40} height={40} /> 
<FlagAnd width={40} height={40} /> 
<FlagAre width={40} height={40} /> 
<FlagArg width={40} height={40} /> 
<FlagArm width={40} height={40} /> 
<FlagAsm width={40} height={40} /> 
<FlagAta width={40} height={40} /> 
<FlagAtg width={40} height={40} /> 
<FlagAus width={40} height={40} /> 
<FlagAut width={40} height={40} /> 
<FlagAze width={40} height={40} /> 
<FlagBdi width={40} height={40} /> 
<FlagBel width={40} height={40} /> 
<FlagBen width={40} height={40} /> 
<FlagBes width={40} height={40} /> 
<FlagBfa width={40} height={40} /> 
<FlagBgd width={40} height={40} /> 
<FlagBgr width={40} height={40} /> 
<FlagBhr width={40} height={40} /> 
<FlagBhs width={40} height={40} /> 
<FlagBih width={40} height={40} /> 
<FlagBlm width={40} height={40} /> 
<FlagBlr width={40} height={40} /> 
<FlagBlz width={40} height={40} /> 
<FlagBmu width={40} height={40} /> 
<FlagBol width={40} height={40} /> 
<FlagBra width={40} height={40} /> 
<FlagBrb width={40} height={40} /> 
<FlagBrn width={40} height={40} /> 
<FlagBtn width={40} height={40} /> 
<FlagBwa width={40} height={40} /> 
<FlagCaf width={40} height={40} /> 
<FlagCan width={40} height={40} /> 
<FlagCck width={40} height={40} /> 
<FlagChe width={40} height={40} /> 
<FlagChl width={40} height={40} /> 
<FlagChn width={40} height={40} /> 
<FlagCiv width={40} height={40} /> 
<FlagCmr width={40} height={40} /> 
<FlagCod width={40} height={40} /> 
<FlagCog width={40} height={40} /> 
<FlagCok width={40} height={40} /> 
<FlagCol width={40} height={40} /> 
<FlagCom width={40} height={40} /> 
<FlagCpv width={40} height={40} /> 
<FlagCri width={40} height={40} /> 
<FlagCub width={40} height={40} /> 
<FlagCuw width={40} height={40} /> 
<FlagCxr width={40} height={40} /> 
<FlagCym width={40} height={40} /> 
<FlagCyp width={40} height={40} /> 
<FlagCze width={40} height={40} /> 
<FlagDeu width={40} height={40} /> 
<FlagDji width={40} height={40} /> 
<FlagDma width={40} height={40} /> 
<FlagDnk width={40} height={40} /> 
<FlagDom width={40} height={40} /> 
<FlagDza width={40} height={40} /> 
<FlagEcu width={40} height={40} /> 
<FlagEgy width={40} height={40} /> 
<FlagEri width={40} height={40} /> 
<FlagEsh width={40} height={40} /> 
<FlagEsp width={40} height={40} /> 
<FlagEst width={40} height={40} /> 
<FlagEth width={40} height={40} /> 
<FlagFin width={40} height={40} /> 
<FlagFji width={40} height={40} /> 
<FlagFlk width={40} height={40} /> 
<FlagFra width={40} height={40} /> 
<FlagFro width={40} height={40} /> 
<FlagFsm width={40} height={40} /> 
<FlagGab width={40} height={40} /> 
<FlagGbr width={40} height={40} /> 
<FlagGeo width={40} height={40} /> 
<FlagGgy width={40} height={40} /> 
<FlagGha width={40} height={40} /> 
<FlagGib width={40} height={40} /> 
<FlagGin width={40} height={40} /> 
<FlagGlp width={40} height={40} /> 
<FlagGmb width={40} height={40} /> 
<FlagGnb width={40} height={40} /> 
<FlagGnq width={40} height={40} /> 
<FlagGrc width={40} height={40} /> 
<FlagGrd width={40} height={40} /> 
<FlagGrl width={40} height={40} /> 
<FlagGtm width={40} height={40} /> 
<FlagGuf width={40} height={40} /> 
<FlagGum width={40} height={40} /> 
<FlagGuy width={40} height={40} /> 
<FlagHkg width={40} height={40} /> 
<FlagHnd width={40} height={40} /> 
<FlagHrv width={40} height={40} /> 
<FlagHti width={40} height={40} /> 
<FlagHun width={40} height={40} /> 
<FlagIdn width={40} height={40} /> 
<FlagImn width={40} height={40} /> 
<FlagInd width={40} height={40} /> 
<FlagIot width={40} height={40} /> 
<FlagIrl width={40} height={40} /> 
<FlagIrn width={40} height={40} /> 
<FlagIrq width={40} height={40} /> 
<FlagIsl width={40} height={40} /> 
<FlagIsr width={40} height={40} /> 
<FlagIta width={40} height={40} /> 
<FlagJam width={40} height={40} /> 
<FlagJey width={40} height={40} /> 
<FlagJor width={40} height={40} /> 
<FlagJpn width={40} height={40} /> 
<FlagKaz width={40} height={40} /> 
<FlagKen width={40} height={40} /> 
<FlagKgz width={40} height={40} /> 
<FlagKhm width={40} height={40} /> 
<FlagKir width={40} height={40} /> 
<FlagKna width={40} height={40} /> 
<FlagKor width={40} height={40} /> 
<FlagKos width={40} height={40} /> 
<FlagKwt width={40} height={40} /> 
<FlagLao width={40} height={40} /> 
<FlagLbn width={40} height={40} /> 
<FlagLbr width={40} height={40} /> 
<FlagLby width={40} height={40} /> 
<FlagLca width={40} height={40} /> 
<FlagLie width={40} height={40} /> 
<FlagLka width={40} height={40} /> 
<FlagLso width={40} height={40} /> 
<FlagLtu width={40} height={40} /> 
<FlagLux width={40} height={40} /> 
<FlagLva width={40} height={40} /> 
<FlagMac width={40} height={40} /> 
<FlagMaf width={40} height={40} /> 
<FlagMar width={40} height={40} /> 
<FlagMco width={40} height={40} /> 
<FlagMda width={40} height={40} /> 
<FlagMdg width={40} height={40} /> 
<FlagMdv width={40} height={40} /> 
<FlagMex width={40} height={40} /> 
<FlagMhl width={40} height={40} /> 
<FlagMkd width={40} height={40} /> 
<FlagMli width={40} height={40} /> 
<FlagMlt width={40} height={40} /> 
<FlagMmr width={40} height={40} /> 
<FlagMne width={40} height={40} /> 
<FlagMng width={40} height={40} /> 
<FlagMnp width={40} height={40} /> 
<FlagMoz width={40} height={40} /> 
<FlagMrt width={40} height={40} /> 
<FlagMsr width={40} height={40} /> 
<FlagMtq width={40} height={40} /> 
<FlagMus width={40} height={40} /> 
<FlagMwi width={40} height={40} /> 
<FlagMys width={40} height={40} /> 
<FlagMyt width={40} height={40} /> 
<FlagNam width={40} height={40} /> 
<FlagNcl width={40} height={40} /> 
<FlagNer width={40} height={40} /> 
<FlagNfk width={40} height={40} /> 
<FlagNga width={40} height={40} /> 
<FlagNic width={40} height={40} /> 
<FlagNiu width={40} height={40} /> 
<FlagNld width={40} height={40} /> 
<FlagNor width={40} height={40} /> 
<FlagNpl width={40} height={40} /> 
<FlagNru width={40} height={40} /> 
<FlagNzl width={40} height={40} /> 
<FlagOmn width={40} height={40} /> 
<FlagPak width={40} height={40} /> 
<FlagPan width={40} height={40} /> 
<FlagPcn width={40} height={40} /> 
<FlagPer width={40} height={40} /> 
<FlagPhl width={40} height={40} /> 
<FlagPlw width={40} height={40} /> 
<FlagPng width={40} height={40} /> 
<FlagPol width={40} height={40} /> 
<FlagPri width={40} height={40} /> 
<FlagPrk width={40} height={40} /> 
<FlagPrt width={40} height={40} /> 
<FlagPry width={40} height={40} /> 
<FlagPse width={40} height={40} /> 
<FlagPyf width={40} height={40} /> 
<FlagQat width={40} height={40} /> 
<FlagReu width={40} height={40} /> 
<FlagRou width={40} height={40} /> 
<FlagRus width={40} height={40} /> 
<FlagRwa width={40} height={40} /> 
<FlagSau width={40} height={40} /> 
<FlagSdn width={40} height={40} /> 
<FlagSen width={40} height={40} /> 
<FlagSgp width={40} height={40} /> 
<FlagSgs width={40} height={40} /> 
<FlagShn width={40} height={40} /> 
<FlagSjm width={40} height={40} /> 
<FlagSlb width={40} height={40} /> 
<FlagSle width={40} height={40} /> 
<FlagSlv width={40} height={40} /> 
<FlagSmr width={40} height={40} /> 
<FlagSom width={40} height={40} /> 
<FlagSpm width={40} height={40} /> 
<FlagSrb width={40} height={40} /> 
<FlagSsd width={40} height={40} /> 
<FlagStp width={40} height={40} /> 
<FlagSur width={40} height={40} /> 
<FlagSvk width={40} height={40} /> 
<FlagSvn width={40} height={40} /> 
<FlagSwe width={40} height={40} /> 
<FlagSwz width={40} height={40} /> 
<FlagSxm width={40} height={40} /> 
<FlagSyc width={40} height={40} /> 
<FlagSyr width={40} height={40} /> 
<FlagTca width={40} height={40} /> 
<FlagTcd width={40} height={40} /> 
<FlagTgo width={40} height={40} /> 
<FlagTha width={40} height={40} /> 
<FlagTjk width={40} height={40} /> 
<FlagTkl width={40} height={40} /> 
<FlagTkm width={40} height={40} /> 
<FlagTls width={40} height={40} /> 
<FlagTon width={40} height={40} /> 
<FlagTto width={40} height={40} /> 
<FlagTun width={40} height={40} /> 
<FlagTur width={40} height={40} /> 
<FlagTuv width={40} height={40} /> 
<FlagTwn width={40} height={40} /> 
<FlagTza width={40} height={40} /> 
<FlagUga width={40} height={40} /> 
<FlagUkr width={40} height={40} /> 
<FlagUry width={40} height={40} /> 
<FlagUsa width={40} height={40} /> 
<FlagUzb width={40} height={40} /> 
<FlagVat width={40} height={40} /> 
<FlagVct width={40} height={40} /> 
<FlagVen width={40} height={40} /> 
<FlagVgb width={40} height={40} /> 
<FlagVir width={40} height={40} /> 
<FlagVnm width={40} height={40} /> 
<FlagVut width={40} height={40} /> 
<FlagWlf width={40} height={40} /> 
<FlagWsm width={40} height={40} /> 
<FlagYem width={40} height={40} /> 
<FlagZaf width={40} height={40} /> 
<FlagZmb width={40} height={40} /> 
<FlagZwe width={40} height={40} />

File Icons

import SVG from '@comfortdelgro/compass-icons/react/file/svg'
aep-gray
aep-solid
aep
ai-gray
ai-solid
ai
audio-gray
audio-solid
audio
avi-gray
avi-solid
avi
code-gray
code-solid
code
css-gray
css-solid
css
csv-gray
csv-solid
csv
dmg-gray
dmg-solid
dmg
doc-gray
doc-solid
doc
document-gray
document-solid
document
docx-gray
docx-solid
docx
empty-gray
empty-solid
empty
esp-gray
esp-solid
esp
exe-gray
exe-solid
exe
fig-gray
fig-solid
fig
folder-gray
folder-solid
folder
gif-gray
gif-solid
gif
html-gray
html-solid
html
image-gray
image-solid
image
img-gray
img-solid
img
indd-gray
indd-solid
indd
java-gray
java-solid
java
jpeg-gray
jpeg-solid
jpeg
jpg-gray
jpg-solid
jpg
js-gray
js-solid
js
json-gray
json-solid
json
mkv-gray
mkv-solid
mkv
mp3-gray
mp3-solid
mp3
mp4-gray
mp4-solid
mp4
mpeg-gray
mpeg-solid
mpeg
pdf-gray
pdf-solid
pdf
pdf2-gray
pdf2-solid
pdf2
png-gray
png-solid
png
psd-gray
psd-solid
psd
ptt-gray
ptt-solid
ptt
pttx-gray
pttx-solid
pttx
rar-gray
rar-solid
rar
rss-gray
rss-solid
rss
spreadsheet-gray
spreadsheet-solid
spreadsheet
sql-gray
sql-solid
sql
svg-gray
svg-solid
svg
tiff-gray
tiff-solid
tiff
txt-gray
txt-solid
txt
video01-gray
video01-solid
video01
video02-gray
video02-solid
video02
wav-gray
wav-solid
wav
webp-gray
webp-solid
webp
xlsx-gray
xlsx-solid
xlsx
xml-gray
xml-solid
xml
zip-gray
zip-solid
zip
Typescript
<AepGrayFile width={40} height={40} /> 
<AepSolidFile width={40} height={40} /> 
<AepFile width={40} height={40} /> 
<AiGrayFile width={40} height={40} /> 
<AiSolidFile width={40} height={40} /> 
<AiFile width={40} height={40} /> 
<AudioGrayFile width={40} height={40} /> 
<AudioSolidFile width={40} height={40} /> 
<AudioFile width={40} height={40} /> 
<AviGrayFile width={40} height={40} /> 
<AviSolidFile width={40} height={40} /> 
<AviFile width={40} height={40} /> 
<CodeGrayFile width={40} height={40} /> 
<CodeSolidFile width={40} height={40} /> 
<CodeFile width={40} height={40} /> 
<CssGrayFile width={40} height={40} /> 
<CssSolidFile width={40} height={40} /> 
<CssFile width={40} height={40} /> 
<CsvGrayFile width={40} height={40} /> 
<CsvSolidFile width={40} height={40} /> 
<CsvFile width={40} height={40} /> 
<DmgGrayFile width={40} height={40} /> 
<DmgSolidFile width={40} height={40} /> 
<DmgFile width={40} height={40} /> 
<DocGrayFile width={40} height={40} /> 
<DocSolidFile width={40} height={40} /> 
<DocFile width={40} height={40} /> 
<DocumentGrayFile width={40} height={40} /> 
<DocumentSolidFile width={40} height={40} /> 
<DocumentFile width={40} height={40} /> 
<DocxGrayFile width={40} height={40} /> 
<DocxSolidFile width={40} height={40} /> 
<DocxFile width={40} height={40} /> 
<EmptyGrayFile width={40} height={40} /> 
<EmptySolidFile width={40} height={40} /> 
<EmptyFile width={40} height={40} /> 
<EspGrayFile width={40} height={40} /> 
<EspSolidFile width={40} height={40} /> 
<EspFile width={40} height={40} /> 
<ExeGrayFile width={40} height={40} /> 
<ExeSolidFile width={40} height={40} /> 
<ExeFile width={40} height={40} /> 
<FigGrayFile width={40} height={40} /> 
<FigSolidFile width={40} height={40} /> 
<FigFile width={40} height={40} /> 
<FolderGrayFile width={40} height={40} /> 
<FolderSolidFile width={40} height={40} /> 
<FolderFile width={40} height={40} /> 
<GifGrayFile width={40} height={40} /> 
<GifSolidFile width={40} height={40} /> 
<GifFile width={40} height={40} /> 
<HtmlGrayFile width={40} height={40} /> 
<HtmlSolidFile width={40} height={40} /> 
<HtmlFile width={40} height={40} /> 
<ImageGrayFile width={40} height={40} /> 
<ImageSolidFile width={40} height={40} /> 
<ImageFile width={40} height={40} /> 
<ImgGrayFile width={40} height={40} /> 
<ImgSolidFile width={40} height={40} /> 
<ImgFile width={40} height={40} /> 
<InddGrayFile width={40} height={40} /> 
<InddSolidFile width={40} height={40} /> 
<InddFile width={40} height={40} /> 
<JavaGrayFile width={40} height={40} /> 
<JavaSolidFile width={40} height={40} /> 
<JavaFile width={40} height={40} /> 
<JpegGrayFile width={40} height={40} /> 
<JpegSolidFile width={40} height={40} /> 
<JpegFile width={40} height={40} /> 
<JpgGrayFile width={40} height={40} /> 
<JpgSolidFile width={40} height={40} /> 
<JpgFile width={40} height={40} /> 
<JsGrayFile width={40} height={40} /> 
<JsSolidFile width={40} height={40} /> 
<JsFile width={40} height={40} /> 
<JsonGrayFile width={40} height={40} /> 
<JsonSolidFile width={40} height={40} /> 
<JsonFile width={40} height={40} /> 
<MkvGrayFile width={40} height={40} /> 
<MkvSolidFile width={40} height={40} /> 
<MkvFile width={40} height={40} /> 
<Mp3GrayFile width={40} height={40} /> 
<Mp3SolidFile width={40} height={40} /> 
<Mp3File width={40} height={40} /> 
<Mp4GrayFile width={40} height={40} /> 
<Mp4SolidFile width={40} height={40} /> 
<Mp4File width={40} height={40} /> 
<MpegGrayFile width={40} height={40} /> 
<MpegSolidFile width={40} height={40} /> 
<MpegFile width={40} height={40} /> 
<PdfGrayFile width={40} height={40} /> 
<PdfSolidFile width={40} height={40} /> 
<PdfFile width={40} height={40} /> 
<Pdf2GrayFile width={40} height={40} /> 
<Pdf2SolidFile width={40} height={40} /> 
<Pdf2File width={40} height={40} /> 
<PngGrayFile width={40} height={40} /> 
<PngSolidFile width={40} height={40} /> 
<PngFile width={40} height={40} /> 
<PsdGrayFile width={40} height={40} /> 
<PsdSolidFile width={40} height={40} /> 
<PsdFile width={40} height={40} /> 
<PttGrayFile width={40} height={40} /> 
<PttSolidFile width={40} height={40} /> 
<PttFile width={40} height={40} /> 
<PttxGrayFile width={40} height={40} /> 
<PttxSolidFile width={40} height={40} /> 
<PttxFile width={40} height={40} /> 
<RarGrayFile width={40} height={40} /> 
<RarSolidFile width={40} height={40} /> 
<RarFile width={40} height={40} /> 
<RssGrayFile width={40} height={40} /> 
<RssSolidFile width={40} height={40} /> 
<RssFile width={40} height={40} /> 
<SpreadsheetGrayFile width={40} height={40} /> 
<SpreadsheetSolidFile width={40} height={40} /> 
<SpreadsheetFile width={40} height={40} /> 
<SqlGrayFile width={40} height={40} /> 
<SqlSolidFile width={40} height={40} /> 
<SqlFile width={40} height={40} /> 
<SvgGrayFile width={40} height={40} /> 
<SvgSolidFile width={40} height={40} /> 
<SvgFile width={40} height={40} /> 
<TiffGrayFile width={40} height={40} /> 
<TiffSolidFile width={40} height={40} /> 
<TiffFile width={40} height={40} /> 
<TxtGrayFile width={40} height={40} /> 
<TxtSolidFile width={40} height={40} /> 
<TxtFile width={40} height={40} /> 
<Video01GrayFile width={40} height={40} /> 
<Video01SolidFile width={40} height={40} /> 
<Video01File width={40} height={40} /> 
<Video02GrayFile width={40} height={40} /> 
<Video02SolidFile width={40} height={40} /> 
<Video02File width={40} height={40} /> 
<WavGrayFile width={40} height={40} /> 
<WavSolidFile width={40} height={40} /> 
<WavFile width={40} height={40} /> 
<WebpGrayFile width={40} height={40} /> 
<WebpSolidFile width={40} height={40} /> 
<WebpFile width={40} height={40} /> 
<XlsxGrayFile width={40} height={40} /> 
<XlsxSolidFile width={40} height={40} /> 
<XlsxFile width={40} height={40} /> 
<XmlGrayFile width={40} height={40} /> 
<XmlSolidFile width={40} height={40} /> 
<XmlFile width={40} height={40} /> 
<ZipGrayFile width={40} height={40} /> 
<ZipSolidFile width={40} height={40} /> 
<ZipFile width={40} height={40} />

H5 Icons

import SVG from '@comfortdelgro/compass-icons/react/h5/svg'
h5-account-filled
h5-account-outlined
h5-activities-filled
h5-activities-outlined
h5-add-heart
h5-add
h5-call
h5-circle-outlined
h5-clock
h5-close
h5-coin
h5-double-right
h5-filter
h5-heart
h5-home-filled
h5-home-outlined
h5-map
h5-marker-border-white
h5-marker-border
h5-marker
h5-notifications-filled
h5-notifications-outlined
h5-pen
h5-remove
h5-search
h5-share
h5-smile
h5-switch
Typescript
<H5AccountFilled width={40} height={40} /> 
<H5AccountOutlined width={40} height={40} /> 
<H5ActivitiesFilled width={40} height={40} /> 
<H5ActivitiesOutlined width={40} height={40} /> 
<H5AddHeart width={40} height={40} /> 
<H5Add width={40} height={40} /> 
<H5Call width={40} height={40} /> 
<H5CircleOutlined width={40} height={40} /> 
<H5Clock width={40} height={40} /> 
<H5Close width={40} height={40} /> 
<H5Coin width={40} height={40} /> 
<H5DoubleRight width={40} height={40} /> 
<H5Filter width={40} height={40} /> 
<H5Heart width={40} height={40} /> 
<H5HomeFilled width={40} height={40} /> 
<H5HomeOutlined width={40} height={40} /> 
<H5Map width={40} height={40} /> 
<H5MarkerBorderWhite width={40} height={40} /> 
<H5MarkerBorder width={40} height={40} /> 
<H5Marker width={40} height={40} /> 
<H5NotificationsFilled width={40} height={40} /> 
<H5NotificationsOutlined width={40} height={40} /> 
<H5Pen width={40} height={40} /> 
<H5Remove width={40} height={40} /> 
<H5Search width={40} height={40} /> 
<H5Share width={40} height={40} /> 
<H5Smile width={40} height={40} /> 
<H5Switch width={40} height={40} />

Props

Name Type Default Description
color string Color of the icon
height number Height of the icon
width number Width of the icon
id string Unique ID of the icon
style string Style of the icon
className CSS Class name of the icon

© 2023 CDG Zig. All rights reserved.

Privacy

Terms & Conditions